<script setup>
import HomePanel from './HomePanel.vue'
import { ref } from 'vue'
import { getHotAPI } from '@/apis/home'
const hotList = ref([])
const getHotList= async () => {
  const res= await getHotAPI()
  console.log(res);
  hotList.value = res.data
}
getHotList()


</script>

<template>
  <HomePanel title="热卖商品" sub-title="人气爆款 不容错过">
    <template #main>
      <ul class="goods-list">
        <li v-for="item in hotList" :key="item.id">
          <RouterLink to="/">
            <!-- <img v-img-lazy="item.picture" alt=""> -->
            <!-- <img :src="item.picture" alt="" /> -->
            <img v-img-lazy="item.picture" alt="">
            <p class="name">{{ item.title }}</p>
            <p class="alt">{{ item.alt }}</p>
          </RouterLink>
        </li>
      </ul>
    </template>
  </HomePanel>
</template>

<style scoped lang='scss'>
    .goods-list {
      width: 990px;
      display: flex;
      flex-wrap: wrap;
      margin: auto;

      li {
        width: 240px;
        height: 300px;
        margin-right: 10px;
        margin-bottom: 10px;

        &:nth-last-child(-n + 4) {
          margin-bottom: 0;
        }

        &:nth-child(4n) {
          margin-right: 0;
        }
      }
    }
</style>